import './index.less';
import * as echarts from 'echarts';
import { option } from "./option.ts";
import { useEffect, useRef } from "react";
import useAppState from "../../store";

const BarGraph = () => {
    // 使用 useRef 持久化保存 ECharts 实例
    const chartRef = useRef<echarts.ECharts | null>(null);
    const chartContainerRef = useRef<HTMLDivElement | null>(null);
    const {graphData,triggerId,similarTableData} = useAppState();

    useEffect(() => {
        // 初始化逻辑（仅执行一次）
        if (!chartRef.current && chartContainerRef.current) {
            // 1. 初始化图表
            chartRef.current = echarts.init(chartContainerRef.current);

            // 2. 添加窗口自适应监听
            const resizeHandler = () => chartRef.current?.resize();
            window.addEventListener('resize', resizeHandler);

            // 3. 组件卸载时的清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartRef.current?.dispose();
                chartRef.current = null;
            };
        }
    }, []);

    // 配置更新逻辑
    useEffect(() => {
        if (chartRef.current && option) {
            const formulas=graphData.nodes.map(item=>item.data.ChemicalFormula)
            const tensile_strengths=graphData.nodes.map(item=>item.data.Tensile_Strength)
            const yield_strengths=graphData.nodes.map(item=>item.data.Yield_Strength)
            option.xAxis[0].data=formulas;
            option.series[0].data=tensile_strengths;
            option.series[1].data=yield_strengths;
            // 使用 setOption 更新配置而非重新初始化
            chartRef.current.setOption(option);
        }
    }, [graphData]);
    useEffect(()=>{
        if(graphData.nodes.length==0) return;
        console.log(similarTableData,'simlar')
        const similarTableDataId=similarTableData.map(item=>item.id);
        const formulas=similarTableData.map(item=>item.ChemicalFormula);
        const tensile_strengths=similarTableData.map(item=>{
            if(item.id===triggerId) return {
                value: item.Tensile_Strength,
                itemStyle: {
                    color: '#FDBF7C'
                }
            };
            else return item.Tensile_Strength;
        })
        const yield_strengths=similarTableData.map(item=>{
            if(item.id===triggerId) return {
                value: item.Yield_Strength,
                itemStyle: {
                    color: '#FDBF7C'
                }
            };
            else return item.Yield_Strength;
        })
        graphData.nodes.map(item=>{
            if(!similarTableDataId.includes(item.id))  {
                formulas.push(item.data.ChemicalFormula)
                tensile_strengths.push(item.data.Tensile_Strength)
                yield_strengths.push(item.data.Yield_Strength)
            }
        })
        option.xAxis[0].data=formulas;
        option.series[0].data=tensile_strengths;
        option.series[1].data=yield_strengths;
        // 使用 setOption 更新配置而非重新初始化
        chartRef.current.setOption(option);
    },[similarTableData])
    return (
        <div
            id="BarGraph"
            ref={(el) => {
                chartContainerRef.current = el;
            }}
        />
    );
};

export default BarGraph;
